<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="网站名称">
          <el-input placeholder="请输入内容" v-model.trim="searchWebsiteParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="网址类型">
          <el-select v-model="searchWebsiteParam.typeId" placeholder="请选择网址类型" clearable>
            <el-option
              v-for="item in websiteTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否常用">
          <el-select v-model="searchWebsiteParam.commonlyUsed" placeholder="请选择是否常用" clearable>
            <el-option label="不常用" value="1"></el-option>
            <el-option label="常用" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序方式">
          <el-select v-model="searchWebsiteParam.sort" placeholder="请选择排序方式" clearable>
            <el-option label="更新时间" value="update_time"></el-option>
            <el-option label="创建时间" value="create_time"></el-option>
            <el-option label="网址类型" value="type_id"></el-option>
            <el-option label="网站名称" value="name"></el-option>
            <el-option label="点击次数" value="number_of_clicks"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="mini" @click="getWebList">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryWebsite">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveWebsite">新增</el-button>
          <el-button type="success" size="mini" @click="checkConnection">检查网站是否有效</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <el-card style="margin-top: 10px">

      <el-table
        :data="websiteTableData"
        max-height="670px"
        height="670px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="网站名称"
          width="120"
        >
          <template slot-scope="scope">
            <!--检查中-->
            <span v-if="scope.row.check === 1">
              <el-tooltip class="item" effect="dark" content="检查中" placement="top-start">
                <i style="color: #909399" class="el-icon-loading"></i>
              </el-tooltip>
            </span>
            <!--通过-->
            <span v-else-if="scope.row.check === 2">
              <el-tooltip class="item" effect="dark" content="网站检查通过" placement="top-start">
                <i style="color: #67C23A" class="el-icon-success"></i>
              </el-tooltip>
            </span>
            <!--不通过-->
            <span v-else-if="scope.row.check === 3">
              <el-tooltip class="item" effect="dark" content="网站检查不通过" placement="top-start">
                <i style="color: #F56C6C" class="el-icon-error"></i>
              </el-tooltip>
            </span>
            <!--未知-->
            <span v-else-if="scope.row.check === 4">
              <el-tooltip class="item" effect="dark" content="未知的网站状态" placement="top-start">
                <i style="color: #E6A23C" class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <!--不显示-->
            <span v-else></span>
            &nbsp;{{scope.row.name}}
          </template>
        </el-table-column>

        <el-table-column
          prop="url"
          show-overflow-tooltip
          label="网址"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-link @click="addOneClick(scope.row)" type="primary"> {{scope.row.url}}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          prop="websiteTypeName"
          label="网址类型"
        >
        </el-table-column>

        <el-table-column
          prop="describe"
          label="描述"
        >
        </el-table-column>

        <el-table-column
          prop="numberOfClicks"
          label="点击次数"
        >
        </el-table-column>

        <el-table-column
          prop="commonlyUsed"
          label="是否常用"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.commonlyUsed === 2">
              <el-tag size="small" type="success">常用</el-tag>
            </div>
            <div v-else>
              <el-tag size="small" type="">不常用</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="overTheWall"
          label="是否要翻墙"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.overTheWall === 1">
              <el-tag size="small" type="success">不需要</el-tag>
            </div>
            <div v-else>
              <el-tag size="small" type="">需要</el-tag>
            </div>
          </template>
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toOpenWebsiteDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="openUpdWebsite(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delWebsiteByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>


    </el-card>


    <WebsiteDetailed ref="websiteDetailedRef"></WebsiteDetailed>
    <WebsiteSaveUpd ref="websiteSaveUpdRef" @getWebList="getWebList"></WebsiteSaveUpd>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import WebsiteDetailed from './WebsiteDetailed.vue'
  import WebsiteSaveUpd from './WebsiteSaveUpd.vue'

  export default {
    name: "WebsiteList",
    components: {
      WebsiteDetailed,
      WebsiteSaveUpd,
    },
    data(){
      return {
        // 网址类型
        websiteTypeList: [],
        // 查询参数
        searchWebsiteParam: {
          typeId: null,
          name: null,
          commonlyUsed: null,
          // 排序字段
          sort: 'number_of_clicks',
        },
        // 表格中的数据
        websiteTableData: [],
      }
    },
    methods: {
      /**
       * 网址新增了一次点击事件
       * @param row 当前行数据
       */
      addOneClick(row){
        window.open(row.url,'_blank')
        http.post("/web/addOneClick", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据ID删除网址 提示信息
       */
      delWebsiteByIdTips(row){
        this.$confirm('是否删除该网址, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delWebsiteById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除网址
       * @param row
       */
      delWebsiteById(row){
        http.post("/web/delWebsiteById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getWebList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开编辑弹出框
       * @param row 当前行数据
       */
      openUpdWebsite(row){
        this.$refs.websiteSaveUpdRef.openPageWebsite('upd', row, this.websiteTypeList)
      },
      /**
       * 跳转打开网站详情
       * @param row 当前行数据
       */
      toOpenWebsiteDetailed(row){
        this.$refs.websiteDetailedRef.openWebsiteDetailed(row)
      },
      /**
       * 获取网址类型
       */
      getWebsiteType(){
        http.post("/web/getWebsiteType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.websiteTypeList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 检查是否连接通过
       */
      checkConnection(){
        if (this.websiteTableData){
          // for (let index = 0; index < this.websiteTableData.length; index ++){
          //   this.checkUrl(index)
          // }
          this.checkUrl(0)
        }
      },
      /**
       * 检查url是否有问题
       * @param index 索引
       */
      checkUrl(index){
        if (index > this.websiteTableData.length){
          return
        }
        let item = this.websiteTableData[index]
        item.check = 1
        // this.$set(this.websiteTableData, index, item)

        http.post("/web/checkConnection", {id: item.id}).then(response => {
          let res = response.data;

          this.checkUrl(index + 1)

          if (res.status === 'error'){
            // this.$message.error(res.msg);
            return
          }
          if (res.data === 2){
            // 通过检测
            item.check = 2
          } else if (res.data === 3){
            // 未通过检查
            item.check = 3
          } else if (res.data === 4){
            // 要翻墙
            item.check = 4
          } else {
            // 未知
          }
          // this.$set(this.websiteTableData, index, item)

        }).catch(error => {
          // this.$message.error(error.message);
        })
      },
      /**
       * 查询全部网址信息
       */
      getWebList(){
        http.post("/web/getWebList", this.searchWebsiteParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          // 处理数据
          this.websiteTableData = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询参数
       */
      resetQueryWebsite(){
        this.searchWebsiteParam = {
          typeId: null,
          name: null,
          commonlyUsed: null,
          sort: 'update_time',
        }
      },
      /**
       * 打开新增的弹出框
       */
      openSaveWebsite(){
        this.$refs.websiteSaveUpdRef.openPageWebsite('save', null, this.websiteTypeList)
      },
    },
    mounted(){
      this.getWebsiteType()
      this.getWebList()
    }
  }
</script>

<style scoped>

</style>
